<template>
  <div id="app">
    <div v-if="$store.state.screenWidth > 1300">
      <navBarPc ref="navbarPcRef"></navBarPc>
    </div>
    <div v-if="$store.state.screenWidth < 1300">
      <navBarH5 ref="navbarH5Ref"></navBarH5>
    </div>

    <router-view />

    <div v-if="$store.state.screenWidth > 1300">
      <tabBarPc></tabBarPc>
    </div>

    <div v-if="$store.state.screenWidth < 1300">
      <tabBarH5></tabBarH5>
    </div>
  </div>
</template>

<script>
//-------PC
import navBarPc from "@/components/pc/navBar.vue";
import tabBarPc from "@/components/pc/tabBar.vue";
//-------H5
import navBarH5 from "@/components/h5/navBar.vue";
import tabBarH5 from "@/components/h5/tabBar.vue";

export default {
  components: {
    navBarPc,
    tabBarPc,
    navBarH5,
    tabBarH5,
  },
  data() {
    return {
      screenWidth: this.sWidth,
      // 当前屏幕的可视化高度
      clientHeight: "",
    };
  },
  mounted() {
    //获取屏幕尺寸
    this.screenWidth = document.body.clientWidth;
    this.$nextTick(() => {
      window.onresize = () => {
        //屏幕尺寸变化
        return (() => {
          this.screenWidth = document.body.clientWidth;
        })();
      };
    });

    //-- 监听区域
    this.clientHeight = `${document.documentElement.clientHeight}px`;
    let that = this;
    window.onresize = function () {
      this.clientHeight = `${document.documentElement.clientHeight}px`;
    };

    this.refreshPageInterval = setInterval(() => {
      window.location.reload(true); // 强制刷新页面
    }, 3600000); // 3600000 = 一小时
  },
  watch: {
    screenWidth: function (n, o) {
      this.$store.commit("screenWidthWatch", n);

      if (document.body.clientWidth == 1300) {
        this.refreshPageInterval = setInterval(() => {
          window.location.reload(true); // 强制刷新页面
        });
      }
    },
    clientHeight: function (n, o) {
      this.$store.commit("clientHeightWatch", n);
    },
    $route(to) {
      this.$store.commit("appPathWatch", to.path);
      this.$store.state.navigationList.forEach((item, index) => {
        if (item.path == to.path) {
          localStorage.setItem("stateActive", index);

          if (this.$store.state.screenWidth > 1300) {
            this.$refs.navbarPcRef.navbarAppHit(index);
          } else {
            this.$refs.navbarH5Ref.navbarAppHit(index);
          }
        }
      });
    },
  },
  methods: {},

  beforeDestroy() {
    if (this.refreshPageInterval) {
      clearInterval(this.refreshPageInterval); // 清除定时器
    }
  },
};
</script>

<style lang="less">
@import url("./assets/css/common.less");

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #31353e;
}

body {
  padding: 0;
  margin: 0;
}
</style>
